<template>
  <div class="all">
    <div class="header">
      <div style="margin-left:60px;margin-top:18px;">
        <el-breadcrumb separator="|" style="font-size:18px;">
          <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item :to="{ path: '/home' }">特价区</el-breadcrumb-item>
          <el-breadcrumb-item>周边</el-breadcrumb-item>
          <el-breadcrumb-item>资讯</el-breadcrumb-item>
          <el-breadcrumb-item>知识</el-breadcrumb-item>
          <el-breadcrumb-item :to="{ path: '/cars' }">购物车</el-breadcrumb-item>
          <el-breadcrumb-item :to="{ path: '/personal' }">个人中心</el-breadcrumb-item>
          <Search></Search>
        </el-breadcrumb>
      </div>
    </div>
    <div>
      <el-image :src="poster"></el-image>
    </div>
    <Carousel/> <!-- 走马灯 -->
    <div class="recommend1">
      <el-row>
        <el-col :span="24">
          <div class="grid-content bg-purple-light" style="margin:40px;">热门推荐</div>
        </el-col>
        <el-col :span="24">
          <div class="grid-content bg-purple-light" style="margin:30px;">—— FAVORITE PET CAT ——</div>
        </el-col>
      </el-row>

      <div>
        <el-image :src="pet1" class="myImg2"></el-image>
        <el-image :src="pet2" class="myImg"></el-image>
        <el-image :src="pet3" class="myImg"></el-image>
        <el-image :src="pet4" class="myImg"></el-image>
      </div>
      <div>
        <el-image :src="pet5" class="myImg"></el-image>
        <el-image :src="pet6" class="myImg"></el-image>
        <el-image :src="pet7" class="myImg"></el-image>
        <el-image :src="pet8" class="myImg2"></el-image>
      </div>
    </div>
    <div class="main">
      <div style="margin:15px;">
        <span @click="myCat()">全部</span>
        <span @click="cat1()">布偶猫</span>
        <span @click="cat2()">加菲猫</span>
        <span @click="cat3()">英国短毛猫</span>
      </div>

      <div>
        <el-main>
          <router-view name="cat"/>
        </el-main>
      </div>
    </div>

    <ScrollTop/> <!--  回到顶部 -->
    <div class="footer">
      <hr/>
      <p>关于 | 帮助 | 条款 | 反馈</p>
      <p>Copyright © 2021</p>
      <p>Designed by Joel</p>
    </div>
  </div>
</template>

<script>
  import Cookie from 'js-cookie'
  import myPoster from '../assets/poster.jpg'
  import Search from "./Search";
  import pet1 from '../assets/pet/pet1.jpg'
  import pet2 from '../assets/pet/pet2.jpg'
  import pet3 from '../assets/pet/pet3.jpg'
  import pet4 from '../assets/pet/pet4.jpg'
  import pet5 from '../assets/pet/pet5.jpg'
  import pet6 from '../assets/pet/pet6.jpg'
  import pet7 from '../assets/pet/pet7.jpg'
  import pet8 from '../assets/pet/pet8.jpg'
  import ScrollTop from "./ScrollTop";
  import Carousel from "./Carousel";

  export default {
    name: "Home2",
    components: {Carousel, ScrollTop, Search},
    data: function () {
      return {
        poster: myPoster,
        pet1: pet1,
        pet2: pet2,
        pet3: pet3,
        pet4: pet4,
        pet5: pet5,
        pet6: pet6,
        pet7: pet7,
        pet8: pet8
      }
    },
    mounted() {
      window.addEventListener('scroll', this.scrollToTop)
    },

    destroyed() {
      window.removeEventListener('scroll', this.scrollToTop)
    },
    methods: {
      myCat() {
        this.$router.push('/home/myCat')
      },
      cat1() {
        this.$router.push('/home/cat1')
      },
      cat2() {
        this.$router.push('/home/cat2')
      },
      cat3() {
        this.$router.push('/home/cat3')
      }
    },
    computed: {}
  }
</script>

<style scoped>

  * {
    margin: 0;
    padding: 0;
  }

  .el-dropdown-link {
    cursor: pointer;
    color: #409EFF;
  }

  .el-icon-arrow-down {
    font-size: 12px;
  }

  ul {
    list-style-type: none;
  }

  div {
    text-align: center;
    vertical-align: middle;
  }

  .header {
    width: 100%;
    height: 70px;
    text-align: center;
    vertical-align: middle;
  }

  .recommend1 {
    font-size: 30px;
    height: 800px;
  }

  .myImg {
    width: 230px;
    height: 230px;
    opacity: 0.65;
  }

  .myImg2 {
    opacity: 0.65;
  }

  .myImg:hover {
    opacity: 1;
    transform: scale(1.5);
    cursor: pointer;
  }

  .myImg2:hover {
    opacity: 1;
    transform: scale(1.5);
    cursor: pointer;
  }

  .el-image {
    margin: 15px;
  }

  .main {
    height: 700px;
  }

  .main span {
    font-size: xx-large;
    cursor: pointer;
    margin: 25px;
  }

  .main span:hover {
    color: blue;
  }

  .footer {
    margin-top: 150px;
    height: 110px;
  }

  .footer p {
    margin: 15px;
  }
</style>
